<!--
* @description 
* @fileName userRealAdd.vue
* @author huangyu
* @date 2023/02/15 22:59:19
!-->
<template>
   <div class="zx-container">
        <el-form :model="ruleForm" :disabled="Boolean(token)" :rules="rules" ref="ruleForm" label-width="120px">
            <el-form-item label="账号/摆摊号" prop="gameCode">
                <el-input v-model="ruleForm.gameCode" placeholder="请输入账号"></el-input>
                <div class="color_warning" v-if="!token">摆摊号或者使用个性账号注册。如果没有摆摊号请联系最帅的GM：东方学长。</div>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="ruleForm.password" show-password placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item label="QQ号" prop="qq">
                <el-input v-model="ruleForm.qq" placeholder="请输入QQ号"></el-input>
            </el-form-item>
            <el-form-item label="游戏名称" prop="gameName">
                <el-input v-model="ruleForm.gameName" placeholder="请输入游戏名称"></el-input>
            </el-form-item>
            <el-form-item label="上传游戏图片" prop="img">
                <vUploadFile @tempFileURL="tempFileURL" :show.sync="show"></vUploadFile>
                <el-image 
                    v-if="ruleForm.ImageUrl" 
                    style="height: 120px"
                    :src="ruleForm.ImageUrl" 
                    :preview-src-list="srcList">
                </el-image>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="registerForm('ruleForm')">提交审核</el-button>
            </el-form-item>
        </el-form>
   </div>
</template>

<script>
import { get } from '@/common/app.js'
import vUploadFile from "@/components/system/upload_file.vue"
import md5 from 'js-md5';
export default {
   components: { vUploadFile },
   data() {
       return {
            show: true,
            srcList: [],
            token: this.$store.state.token,
            ruleForm: {
                gameCode: "",
                gameName: "",
                password: '',
                qq: "",
                ImageUrl: "",
            },

            rules: {
                gameCode: [{ required: true, message: '请输入账号', trigger: 'blur' },],
                gameName: [{ required: true, message: '请输入游戏名称', trigger: 'blur' },],
                qq: [{ required: true, message: '请输入QQ号', trigger: 'blur' },],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' },],
            },
       }
   },
   mounted() {

   },
   methods: {
    getDetail(){
            let params = {
                type: 'getUser',
                api: 'api-user-real-detail',
                token: this.token,
                data: this.ruleForm,
            }
            get('game', params).then(res => {
                if (res) {
                    console.log(res)
                }
            })
        },
        tempFileURL(url){
            this.srcList = []
            this.srcList.push(url)
            this.ruleForm.ImageUrl = url
        },
        registerForm(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.register()
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        register(){
            this.ruleForm.password = md5(this.ruleForm.password)
            if(!this.ruleForm.ImageUrl){
                this.$message.error("请上传游戏截图！")
                return
            }
            let params = {
                type: 'getUser',
                api: 'api-user-real-add',
                data: this.ruleForm,
            }
            get('game', params).then(res => {
                if (res) {
                    console.log(res)
                    if(res.type=='error'){
                        this.$message.error(res.msg)
                        return
                    }
                    if(res.id){
                        this.$message.success("提交成功！") 
                    }
                }
            })
        },
   },
}
</script>

<style scoped>

</style>